<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-tabs v-model="recordName" @tab-click="handleClick">
          <el-tab-pane
              label="券的获取记录"
              name="couponObtain"
          ></el-tab-pane>
          <el-tab-pane
              label="券的消费记录"
              name="couponConsumption"
          ></el-tab-pane>
          <el-tab-pane
              label="积分的获取记录"
              name="integralObtain"
          ></el-tab-pane>
          <el-tab-pane
              label="积分的消费记录"
              name="integralConsumption"
          ></el-tab-pane>
          <el-tab-pane
              label="抵用金的获取记录"
              name="getDeductionAmount"
          ></el-tab-pane>
          <el-tab-pane
              label="抵用金的消费记录"
              name="deductionAmount"
          ></el-tab-pane>
        </el-tabs>
        <el-date-picker
            v-model="value1"
            @change="onchangeTime"
            value-format="yyyy-MM-dd" format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 300px"
        >
        </el-date-picker>
        <div style="width: 500px;float: right;margin-top: 10px;height: 50px">
          <div v-if="recordName==='couponObtain'">益联券获取总量 <span style="font-weight: bold">{{ sumData }}</span></div>
          <div v-if="recordName==='couponConsumption'">益联券消费总量 <span style="font-weight: bold">{{ sumData }}</span></div>
          <div v-if="recordName==='integralObtain'">积分获取总量 <span style="font-weight: bold">{{ sumData }}</span></div>
          <div v-if="recordName==='integralConsumption'">积分消费总量 <span style="font-weight: bold">{{ sumData }}</span></div>
          <div v-if="recordName==='getDeductionAmount'">抵用金获取总量 <span style="font-weight: bold">{{ sumData }}</span></div>
          <div v-if="recordName==='deductionAmount'">抵用金消费总量 <span style="font-weight: bold">{{ sumData }}</span></div>
        </div>

      </div>
      <el-table v-loading="formLoading" :data="listData.list" style="width: 100%" size="small" highlight-current-row>
        <el-table-column prop="id" label="ID" min-width="90"/>
        <el-table-column prop="typeName" label="获取方式" min-width="150"/>
        <el-table-column prop="name" label="描述" min-width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.typeName==='好友转账' || scope.row.typeName==='收到好友转账'">{{scope.row.content}}</span>
            <span v-else>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="recordName==='couponObtain' || recordName==='couponConsumption'" prop="voucher"
                         label="益联券" min-width="100"/>
        <el-table-column v-if="recordName==='integralObtain' || recordName==='integralConsumption'" prop="integral"
                         label="益积分" min-width="100"/>
        <el-table-column prop="createTime" label="记录时间" min-width="100"/>
      </el-table>
      <el-pagination
          :current-page="listPram.page"
          :page-sizes="[10]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listData.count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script>
import {detail, dataSummary} from "@/api/user";

export default {
  components: {},
  props: {
    id: {
      default: null
    }
  },
  data() {
    return {
      type: 2,
      value1: '',
      recordName: 'couponObtain',
      formLoading: true,
      listData: {list: [], count: 0},
      sumData:0,
      listPram: {
        page: 1,
        limit: 10,
        dateLimit: '',
        type: '',
        id: '',
      },
    }
  },
  mounted() {
    if (this.id) {
      this.getDetail();
    }
  },
  methods: {

    onchangeTime(e) {
      this.timeVal = e;
      this.listPram.dateLimit = e ? this.timeVal.join(',') : '';
      this.getDetail()
    },
    handleClick() {
      this.listPram.dateLimit = '';
      this.listPram.page = 1;
      this.value1 = '';
      this.getDetail()
    },
    getDetail() {
      this.formLoading = true
      this.listPram.id = this.id
      if (this.recordName === 'couponObtain') {
        this.listPram.type = 2
      } else if (this.recordName === 'couponConsumption') {
        this.listPram.type = 1
      } else if (this.recordName === 'integralObtain') {
        this.listPram.type = 4
      } else if (this.recordName === 'integralConsumption') {
        this.listPram.type = 3
      }else if (this.recordName === 'getDeductionAmount') {
        this.listPram.type = 5
      }else if (this.recordName === 'deductionAmount') {
        this.listPram.type = 6
      }
      detail(this.listPram).then(res => {
        this.listData = res
        dataSummary(this.listPram).then(res=>{
          this.sumData=res
        })
      }).finally(() => {
        this.formLoading = false;
      })
    },
    handlerSubmit() {
      if (this.saveLoading || this.formLoading) {
        return;
      }
    },
    close() {
      this.$emit('hideEditDialog')
    },
    handleSizeChange(val) {
      console.log(1111)
      this.listPram.limit = val
      this.getDetail()
    },
    handleCurrentChange(val) {
      this.listPram.page = val
      this.getDetail()
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .el-upload {
  }
}

.img {
  width: 80px;
  height: 80px;
  border-radius: 100px;
}
</style>
